css定位详解(相对定位、绝对定位和固定定位) | 您所在的位置:网站首页 › css 相对定位 绝对定位怎么设置 › css定位详解(相对定位、绝对定位和固定定位) |
文章目录
一、什么是定位?二、各个属性值的作用1、相对定位2、绝对定位3、静态定位4、固定定位
三、相对和绝对定位1、相对定位2、绝对定位3、相对定位和绝对定位(1)相对定位(2)绝对定位
四、相对、绝对定位与浮动1、相对定位2、绝对定位3、浮动4、相对定位与浮动5、绝对定位和浮动
五、z-index的使用六、小结
一、什么是定位?
css中的position属性,position有四个值:relative(相对定位)、absolute(绝对定位)、static(静态定位)和fixed(固定定位),通过top、left、bottom、right来调整元素位置 二、各个属性值的作用 属性值作用备注relative相对定位参考元素本身absolute绝对定位参考最近的祖先元素static静态定位基本定位规定fixed固定定位参考浏览器窗口 1、相对定位相对定位的偏移元素参考的是元素本身,不会使元素脱离文档流,元素的初始位置占据的空间会被保留 html代码:
可以看出相对定位是相对于元素本身来说,其中距离顶部30px,距离左边20px,并且没有脱离文档流 2、绝对定位绝对定位是相对于已定位的最近的祖先元素,如果的最近的祖先元素没有设置定位,那么它的位置就相对于最初的包含块(body) css代码: 可以看到绝对定位脱离文档流,由于父级元素未进行定位,所以是以最初的包含块(body)进行定位,现在将该元素的父级元素进行定位 css代码: 没有特别的设定,不脱离文档流,遵循基本的定位规定,不能通过z-index进行层次分级 css代码: 固定定位相对于浏览器窗口,脱离文档流,使用fixed的元素不会随窗口的滚动而滚动 html代码: css代码: 网页效果(未设定固定定位): 将三个色块来区别相对定位和绝对定位 未进行定位时,默认网页效果: css代码: css代码: 为了使效果更加明显,这里将红、黄、蓝三色块进行一定程度的偏移 (1)相对定位css代码: css代码: 绝对定位和浮动都脱离文档流 1、相对定位css代码: css代码: css代码: css代码: css代码: 若要将下面的色块中红色色块显示在黄色色块上面,可以使用z-index |
CopyRight 2018-2019 实验室设备网 版权所有 |